<template>
  <el-row :gutter="10">
    <ElCol :span="10" :offset="7">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            v-on:keyup.enter.native="onSubmit('form')"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            v-on:keyup.enter.native="onSubmit('form')"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <!-- @click="onSubmit" -->
          <el-button
            type="primary"
            @click="onSubmit('form')"
            v-loading.fullscreen.lock="fullscreenLoading"
          >登录</el-button>
          <el-button type="primary" @click="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </ElCol>
  </el-row>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      fullscreenLoading: false,
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 16, message: "长度在 5到 16 个字符", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("验证通过,submit");

          this.openLoading();
          axios
            .post("api/Authenticate/GetToken", {
              username: this.form.username,
              password: this.form.password
            })
            .then(res => {
              console.log(res);
              console.log(res.data);
              console.log(res.data.access_token);

              this.closeLoading();
              this.$message({
                showClose: true,
                message: "恭喜你，登录成功，马上跳转至首页",
                type: "success"
              });
              sessionStorage.setItem("access_token", res.data.access_token);
              setTimeout(() => {
                this.$router.push({ name: "home" });
              }, 1000);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      //   console.log("submit");
      //   this.openLoading();
      //   axios
      //     .post("api/Authenticate/GetToken", {
      //       username: this.form.username,
      //       password: this.form.password
      //     })
      //     .then(res => {
      //       console.log(res);
      //       console.log(res.data);
      //       console.log(res.data.access_token);
      //       this.closeLoading();
      //       this.$message({
      //         showClose: true,
      //         message: "恭喜你，登录成功，马上跳转至首页",
      //         type: "success"
      //       });
      //       sessionStorage.setItem("access_token", res.data.access_token);
      //       setTimeout(() => {
      //         this.$router.push({ name: "home" });
      //       }, 1000);
      //     });
    },
    reset(formName) {
      //   this.form.username = "";
      //   this.form.password = "";
      this.$refs[formName].resetFields();
    },
    openLoading() {
      this.fullscreenLoading = true;
    },
    closeLoading() {
      this.fullscreenLoading = false;
    },
    set_token(state, token) {
      state.token = token;
      sessionStorage.token = token;
    }
  }
};
</script>

<style scoped>
</style>

